<template>
	<view>
		<view class="float" @click="setPopup(true)"
			:style="[{backgroundImage: `url(${item.params.icon})`},{width:item.params.size+'px'},{height:item.params.size+'px'},{right:item.params.right+'px'},{bottom:item.params.bottom+'px'}]">
		</view>
		<u-popup :show="show" mode='center' @close="setPopup(false)">
			<view class="popup p20">
				<view class="title fb f36 tc mb20">{{item.params.title}}</view>
				<view class="content sub f28">{{item.params.content}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "wlk-float",
		props: ['item'],
		data() {
			return {
				show: false
			};
		},
		methods: {
			setPopup(e) {
				if (uni.$u.test.mobile(this.item.params.content)) {
					uni.makePhoneCall({
						phoneNumber: this.item.params.content
					})
					return
				}
				this.show = e
			}
		}
	}
</script>

<style scoped lang="scss">
	.float {
		z-index: 1;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: fixed;
	}

	.popup {
		width: 600rpx;
	}
</style>